// 引入react
import * as React from 'react';
import {StyleSheet, View, Text, ScrollView, Dimensions, TouchableWithoutFeedback, Image} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import AllStyle from '../../../../style';
import {HeaderTitle} from '../../../../componet/settingComponent/HeaderTitle';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {BottomButton} from '../../../../componet/settingComponent/BottomButton';
import {Loading} from '../../../../utils/Loading';
import {getFaceDateInfoList, getNotApprovedFace} from '../../../../api/facedatabase';
import {Toast} from '../../../../utils/Toast';

/**
 * @Description:
 * @author TangYong
 * @date 2023/3/13
 */
export class FaceAudit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            unapprovedList: [],
        };
    }

    //生命周期：组件挂载后
    componentDidMount() {
        this.init();
    }

    componentDidUpdate(oldProps) {
        // 比较前后props
        if (this.props.route.params != oldProps.route.params) {
            this.init();
        }

    }

    //方法
    init = () => {
        Loading.show();
        getNotApprovedFace().then(res => {
            // console.log(JSON.stringify(res),1);
            Loading.hidden();
            let unapprovedList = res.data;
            this.setState({unapprovedList});
        }).catch(err => {
            Toast.showWarning(err.toString());
            Loading.hidden();
        }).finally(() => {
            Loading.hidden();

        });
    };

    //方法
    back = () => {
        // const route = {
        //
        //     name: this.props.route.params.routePathName,
        //     params: {
        //         Name: this.state.Name,
        //     },
        // };
        // this.props.navigation.navigate(route);
        this.props.navigation.goBack();
    };
    goto = (name, params) => {

        const route = {
            name: name,
            params: {
                routePathName: this.props.route.name,
                ...params,
            },

        };
        this.props.navigation.navigate(route);
    };

    //DOM
    render() {
        return (
            <SafeAreaView edges={['top', 'left', 'right', 'bottom']} style={{flex: 1, backgroundColor: '#FFF'}}>
                <View style={AllStyle.container}>
                    <HeaderTitle goBack={() => this.back()} headtitle={this.props.route.params.title}></HeaderTitle>
                    <ScrollView style={{padding: 15}}>
                        <View style={style.cardContainer}>

                            {this.state.unapprovedList.map(item => {
                                return <TouchableWithoutFeedback key={item.userId} onPress={() => {
                                    this.goto('photoReview', {title: '照片审核', id: item.faceDatabaseEntity.id});
                                }}>


                                    <View style={style.cardBodyItem}>
                                        <View style={style.cardBodyTop}>
                                            <Image
                                                source={{uri: item.faceDatabaseEntity.url}}
                                                //resizeMode={'center'}
                                                style={style.img}>

                                            </Image>

                                        </View>
                                        <Text style={{marginTop: 5, marginBottom: 5}}>{item.username}</Text>
                                    </View>
                                </TouchableWithoutFeedback>;
                            })
                            }
                            {
                                this.state.unapprovedList == 0 &&
                                <View style={{flex:1,flexDirection: 'row',alignItems: 'center',justifyContent: 'center'}}>
                                    <Text>暂时没有要审核的照片</Text>
                                </View>
                            }

                        </View>
                    </ScrollView>
                </View>
                <BottomButton click={() => this.back()} title='返回'></BottomButton>
            </SafeAreaView>

        );
    }

}

const width = Dimensions.get('window').width;
const style = StyleSheet.create({
    //样式
    cardContainer: {
        marginLeft: -15,
        paddingLeft: 10,
        //backgroundColor: 15,
        flexDirection: 'row',
        width: width,
        flexWrap: 'wrap',
    },
    cardBodyItem: {
        marginTop: 5,
        alignItems: 'center',
        justifyContent: 'center',
        width: (width - 20 - 10 - 15) / 4,
        marginLeft: 5,
        // backgroundColor:'#FFF',
    },
    img: {
        width: (width - 20 - 10 - 15) / 4,
        height: (width - 20 - 10 - 15) / 4,
        borderRadius: 5,
        //backgroundColor: 'red'
    },
    cardBodyTop: {},
});

